<template>
    <div class="todo-list-container">
      <h1 class="todo-list-title">
        <i class="fas fa-clipboard-list"></i> Todo List
      </h1>
      <div class="input-container">
        <input
          v-model="newTodoTitle"
          @keyup.enter="addTodo"
          placeholder="请输入新的待办事项..."
          class="todo-input"
        />
        <button @click="addTodo" class="add-btn">
          <i class="fas fa-plus"></i> 添加
        </button>
      </div>
      <ul class="todo-list">
        <TodoItem
          v-for="(todo, index) in todos"
          :key="index"
          :title="todo.title"
          :completed="todo.completed"
          @update:completed="updateTodoCompleted(index, $event)"
          @remove-todo="removeTodo(index)"
        />
      </ul>
    </div>
  </template>
  
  <script>
  import TodoItem from './TodoItem.vue';
  
  export default {
    name: 'TodoList',
    components: {
      TodoItem
    },
    data() {
      return {
        todos: [],
        newTodoTitle: ''
      };
    },
    methods: {
      addTodo() {
        if (this.newTodoTitle.trim()) {
          this.todos.push({
            title: this.newTodoTitle.trim(),
            completed: false
          });
          this.newTodoTitle = '';
        }
      },
      removeTodo(index) {
        this.todos.splice(index, 1);
      },
      updateTodoCompleted(index, newCompleted) {
        this.todos[index].completed = newCompleted;
      }
    }
  };
  </script>
  
  <style scoped>
  /* 引入字体图标 */
  @import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css');
  
  .todo-list-container {
    max-width: 50rem;
    margin: 3rem auto;
    padding: 2rem;
    background: linear-gradient(135deg, #fdfcfb 0%, #e2d1c3 100%);
    border-radius: 1rem;
    box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.1);
  }
  
  .todo-list-title {
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    color: #333333;
    margin-bottom: 2rem;
  }
  
  .todo-list-title i {
    margin-right: 0.75rem;
    color: #4CAF50;
  }
  
  .input-container {
    display: flex;
    margin-bottom: 2rem;
  }
  
  .todo-input {
    flex-grow: 1;
    padding: 1rem;
    border: none;
    border-radius: 0.5rem 0 0 0.5rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1);
  }
  
  .todo-input:focus {
    outline: none;
    box-shadow: 0 0 0 0.125rem #4CAF50;
  }
  
  .add-btn {
    padding: 1rem 1.5rem;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 0 0.5rem 0.5rem 0;
    cursor: pointer;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 1rem;
    transition: background-color 0.3s ease, transform 0.3s ease;
    display: flex;
    align-items: center;
  }
  
  .add-btn i {
    margin-right: 0.5rem;
  }
  
  .add-btn:hover {
    background-color: #45a049;
    transform: scale(1.05);
  }
  
  .todo-list {
    list-style-type: none;
    padding: 0;
  }
  </style>